<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="Language" content="English" />
      <title>Placing components into board</title>       <meta http-equiv="Content-language" content="en-US">
  </head>
    <body>
        <div>
            <h3>Tutorial 1: Network creation</h3>
            <ul>
                <li><a href="./welcome_screen.html">Welcome screen</a></li>
                <li><a href="./project_create.html">New project creation</a></li>
                <li><a href="./component_placement.html">Placing components into board</a></li>
                <li><a href="./component_connecting.html">Connecting components with cables</a></li>
                <li><a href="./network_manipulation.html">Network manipulation</a></li>
                <li><a href="./properties_setup.html">Setting network components properties</a></li>
                <li><a href="./network_details.html">Details settings</a></li>
                <li><a href="./project_save.html">Saving the project</a></li>
            </ul>
            
            <hr>
            
            <h1>Placing components into board</h1>

            <p>First, we start with <b>choosing the right tool</b></p>
            
            <h2>Menu with tools</h2>
            
            <p>There is a <b>tools menu</b> on the left side of the screen. The tools are the following:</p>

            <ul>
                <li><b>Hand</b> - tool for component manipulation (shortcut H)</li>
                <li><b>Move</b> - tool for moving the whole draw panel in viewport (shortcut M)</li>
                <li><b>End devices</b> - menu with end devices</li>
                <li><b>Routers</b> - menu with routers</li>
                <li><b>Switches</b> - menu with switches</li>
                <li><b>Real computer</b> - component representing real pc</li>
                <li><b>Cables</b> - menu with cables</li>
                <li><b>Resize panel to components</b> - tool for making the draw panel smaller</li>
                <li><b>Align to grid</b> - aligns components to invisible grid</li>
            </ul>
            
            <p>If you see small black triangle on the <b>bottom left</b> of the button, than there is a submenu for this button.
                You can access it with <b>right mouse button</b>. You can choose current tool in submenu with left mouse button</p>

            <img src="../../../../images/en/toolbar_menu_hand.png" >

            <p>We start with <b>tool selection</b>. Open the <b>Routers</b> menu with <b>right mouse button</b>  and choose 
                <b>Linux router</b> with four interfaces.</p>

            <img src="../../../../images/en/toolbar_menu_tool_select.png" >
            
            <h2>Placing the component</h2>
            
            <p>Move the mouse on the <b>draw panel</b> and using left mouse button place the Router.
                The router will be at the position you clicked with the mouse.</p>

            <img src="../../../../images/component_placement_router_linux.png" >

            <p>Than we add some more components, for example like this:</p>
            
            <img src="../../../../images/component_placement_more.png" >
            
            <p>Next part of this tutorial is: <a href="./component_connecting.html">Connecting components with cables</a>.</p>
        </div>
    </body>
</html>
